<template>
  <div>
    <!-- 第一部分 -->
    <el-card class="header" shadow="always">
      <el-row class="title">任务进度汇总</el-row>
      <!-- echarts 图表引入 -->
      <el-col :span="4" v-for="(item, index) in itemList" :key="index">
        <div
          class="grid-content bg-purple item"
          :style="{ backgroundColor: item.color }"
        >
          <div class="item_li">
            <span>{{ item.num }}</span>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </el-col>
    </el-card>
    <!-- 第二部分 -->
    <el-row>
      <el-col :span="12">
        <el-card class="header layouts" style="height: 200px" shadow="always">
          <el-row class="title">任务状态分布</el-row>
          <el-row class="layouts_one">
            <div id="main"></div>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="header" style="height: 200px" shadow="always">
          <el-row class="title">任务完成情况分布</el-row>
          <el-row class="layouts_one">
            <div id="main1"></div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第三部分 -->
    <el-row>
      <el-col :span="12">
        <el-card class="header layouts" style="height: 200px" shadow="always">
          <el-row class="title">任务进度</el-row>
          <el-row class="layouts_one">
            <div id="main2"></div>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="header" style="height: 200px" shadow="always">
          <el-row class="title">任务完成率</el-row>
          <el-row class="layouts_one">
            <div id="main3"></div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二部分 封装的组件 -->
    <!-- <el-row>
>>>>>>> a20989f (第八次提交)
        <PieChart></PieChart>
        <CircleChart></CircleChart>
      </el-row> -->
    <!-- 第三部分 -->
    <!-- <el-row>
        <BarChart></BarChart>
        <PercentChart></PercentChart>
<<<<<<< HEAD
      </el-row>
=======
      </el-row> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import PieChart from "./children/pieChart.vue";
import CircleChart from "./children/circleChart.vue";
import BarChart from "./children/barChart.vue";
import PercentChart from "./children/PercentChart.vue";
import {
  quertJobProgressSummarzingAPI,
  queryJobStateDistributionAPI,
  queryJobPerormanceAPI,
  quertJobProgressAPI,
  queryJobOverRateAPI,
} from "@/api/echarts.js";
import { pie2, bar1, bar2 } from "@/utils/echarts.js";
export default {
  components: {
    PieChart,
    CircleChart,
    BarChart,
    PercentChart,
  },
  data() {
    return {
      itemList: [
        {
          num: 0,
          title: "任务数汇总",
          color: "#59C4C4",
        },
        {
          num: 0,
          title: "完结任务",
          color: "#93D2F3",
        },
        {
          num: 0,
          title: "未完结任务",
          color: "#F4CE98",
        },
        {
          num: 0,
          title: "预警任务",
          color: "#FFCCC7",
        },
        {
          num: 0,
          title: "超期任务",
          color: "#A36C67",
        },
      ],
    };
  },
  created() {
    this.quertJobProgressSummarzing();  // 任务进度汇总
    this.queryJobStateDistribution(); // 任务状态分布
    this.queryJobPerormance(); // 任务完成情况分布
    this.quertJobProgress(); // 任务进度
    this.queryJobOverRate(); // 任务完成率
  },
  mounted() {
    // 基于准备好的 dom，初始化 echarts 实例
    // const myChart = echarts.init(document.getElementById("main"));
    // const myChart1 = echarts.init(document.getElementById('main1'));
    // const myChart2 = echarts.init(document.getElementById("main2"));
    // const myChart3 = echarts.init(document.getElementById("main3"));
    // 绘制图表
  },
  methods: {
    // 任务进度汇总
    quertJobProgressSummarzing() {
      quertJobProgressSummarzingAPI({}).then((res) => {
        const data = res.data[0]
        this.itemList = [{
          num: data.allCount,
          title: "任务数汇总",
          color: "#59C4C4",
        },
        {
          num: data.downNum,
          title: "完结任务",
          color: "#93D2F3",
        },
        {
          num: data.noDownNum,
          title: "未完结任务",
          color: "#F4CE98",
        },
        {
          num: 0,
          title: "预警任务",
          color: "#FFCCC7",
        },
        {
          num: data.errorNum,
          title: "超期任务",
          color: "#A36C67",
        }]
      }).catch((err) => {
        console.error("任务进度汇总",err);
      });
    },
    // 任务状态分布
    queryJobStateDistribution() {
      queryJobStateDistributionAPI({}).then((res) => {
        const myChart = echarts.init(document.getElementById("main"));
        myChart.setOption([
            { value: 2300, name: "已经完结", itemStyle: { color: "#93D2F3" } }, // 设置“已经完结”的颜色
            { value: 150, name: "超期", itemStyle: { color: "#A36C67" } }, // 设置“超期”的颜色
            { value: 580, name: "预警", itemStyle: { color: "#FFCCC7" } }, // 设置“预警”的颜色
            { value: 600, name: "正常推进", itemStyle: { color: "#F4CE98" } }, // 设置“正常推进”的颜色
        ]);
      }).catch(fail => {
        console.error(fail);
      })
    },
    // 任务完成情况分布
    queryJobPerormance() {
      queryJobPerormanceAPI({})
        .then((res) => {
          // console.log(res);
          let data = [];
          res.data.forEach((item) => {
            switch (item.jobState) {
              case 0:
                data.push({
                  value: item.num,
                  name: "未发布",
                });
                break;
              case 1:
                data.push({
                  value: item.num,
                  name: "进行中",
                  itemStyle: { color: "#F4CE98" },
                });
                break;
              case 2:
                data.push({
                  value: item.num,
                  name: "已完结",
                  itemStyle: { color: "#93D2F3" },
                });
                break;
              default:
                break;
            }
          });
          const myChart1 = echarts.init(document.getElementById("main1"));
          myChart1.setOption(pie2(data));
        })
        .catch((fail) => {
          console.error(fail);
        });
    },
    // 任务进度
    quertJobProgress() {
      quertJobProgressAPI({})
        .then((res) => {
          // console.log(res.data);
          let name = [],
            data1 = [],
            data2 = [];
          res.data.forEach((item) => {
            if (item.principalName == null) return;
            name.push(item.principalName);
            data1.push(item.noDownNum);
            data2.push(item.downNum);
          });
          console.log(name, data1, data2);
          const myChart2 = echarts.init(document.getElementById("main2"));
          myChart2.setOption(bar1(name, data1, data2));
        })
        .catch((fail) => {
          console.error(fail);
        });
    },
    // 任务完成率
    queryJobOverRate() {
      queryJobOverRateAPI({})
        .then((res) => {
          // console.log(res.data);
          let name = [],
            data1 = [],
            data2 = [];
          res.data.forEach((item) => {
            if (item.principalName == null) return;
            name.push(item.principalName);
            data1.push(item.downRate);
            data2.push(item.noDownRate);
          });
          console.log(name, data1, data2);
          const myChart3 = echarts.init(document.getElementById("main3"));
          myChart3.setOption(bar2(name, data1, data2));
        })
        .catch((fail) => {
          console.error(fail);
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 第一个图标的card
.header {
  margin-bottom: 15px;
  padding: 20px;
  .title {
    font-weight: bolder;
    padding-left: 12px;
    border-left: 6px solid rgb(124, 148, 237);
  }
  .item {
    margin-top: 30px;
    width: 154px;
    height: 80px;
    margin-left: 22px;
    color: white;
    // background-color: pink;
    border-radius: 5px;
  }
  .item_li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .item_li span:first-child {
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 5px;
    align-self: center;
  }

  .item_li span:last-child {
    display: flex;
    font-size: 16px;
  }
}

.layouts {
  margin-right: 15px;
  .layouts_one {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/deep/ .el-col-4 {
  margin-right: 38px;
}

#main {
  height: 300px;
  width: 100%;
  margin-top: -50px;
}

#main1 {
  height: 300px;
  width: 100%;
  margin-top: -50px;
}

#main2 {
  height: 300px;
  width: 100%;
  margin-top: -60px;
}

#main3 {
  height: 300px;
  width: 100%;
  margin-top: -64px;
}
</style>

